<template>
  <div>
    <v-row class="list mb-5">
      <v-col v-for="item in newsList" :key="item.id" cols="12" md="4" sm="12">
        <nuxt-link
          class="d-flex item"
          :to="{ name: 'newsDetail', params: { id: item.id } }"
        >
          <img :src="item.img" alt="" />
          <div class="item-content">
            <p>{{ item.name }}</p>
            <span class="desc">{{ item.desc }}</span>
            <p>{{ item.create_time }}</p>
          </div>
        </nuxt-link>
      </v-col>
    </v-row>
    <div class="d-none d-sm-flex">
      <div v-show="page.count > 0" class="pages-box">
        <Pagination
          :total="page.count < 10 ? 10 : page.count"
          @change="changePagination"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '~/components//pagination.vue'
export default {
  components: {
    Pagination,
  },
  async asyncData({ $axios, store }) {
    const data = await $axios.$post('news/index', {
      language: store.state.locale,
      page: 1,
      rows: 12,
    })
    const result = JSON.parse(data).data
    return {
      page: 1,
      newsList: result.data,
    }
  },
  async created() {
    const equipment = localStorage.getItem('equipment')
    if (equipment == 'phone') {
      const data = await this.$axios.$post('news/index', {
        language: localStorage.getItem('lang'),
        page: 2,
        rows: 10000,
      })
      this.newsList.concat(JSON.parse(data).data)
    }
  },
  methods: {
    async changePagination(current) {
      this.current = current
      const data = await $axios.$post('news/index', {
        language: store.state.locale,
        page: current,
        rows: 12,
      })
      this.newsList = JSON.parse(data).data
    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  img {
    width: 100px;
    height: 80px;
    margin-right: 12px;
  }
  .item-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    p {
      margin-bottom: auto;
      &:first-child {
        width: 100%;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &:last-child {
        align-self: flex-end;
        margin-bottom: 0;
        color: #999;
        font-size: 12px;
      }
    }
    span {
      width: 100%;
      color: #666;
      font-size: 13px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}

.pages-box {
  display: flex;
  justify-content: center;
  width: 100%;
}
</style>
